<template>
  <div class="cityLinkpage">
    <div class="list">
      <popup v-model="regionVisible" position="bottom" class="region-popup w100">
        <div class="title flex border_b p_r30 p_l30">
          <div class="font_size28 color_0d " @click="cancalFn(1)" >取消</div>
          <div class="font_size32 color_33 flex-1 t_center">选择提货地址</div>
          <div class="font_size28 color_0d  t_right" @click="cancalFn(2)">确定</div>
        </div>
        <picker :slots="slots" valueKey="name"   @change="onValuesChange" :itemHeight="40"></picker>
      </popup>
    </div>
  </div>
</template>

<script>
  import { Picker } from 'mint-ui';
  import { Popup } from 'mint-ui';
  import "mint-ui/lib/style.css";
    export default {
      name: "city",
      data(){
          return{
            regionVisible: true,
            citylist: [],
            slots: [
              {
                flex: 1,
                defaultIndex: 0,
                values: [],  //省份数组
                className: 'slot1',
                textAlign: 'center'
              },
              {
                divider: true,
                content: '',
                className: 'slot2'
              },
              {
                flex: 1,
                values: [],
                className: 'slot3',
                textAlign: 'center'
              },
              {
                divider: true,
                content: '',
                className: 'slot4'
              },
              {
                flex: 1,
                values: [],
                className: 'slot5',
                textAlign: 'center'
              }
            ],

            myAddressProvince:'',
            myAddressCity:'',
            myAddresscounty:'',
            province_id:'',
            city_id:'',
            county_id:'',
          }
      },
      components: {
        Picker,
        Popup,
      },
      props: {
        // regionVisible: {
        //   type: Boolean,
        //   default: false
        // }
      },
      mounted(){
        this.$nextTick(() => { //vue里面全部加载好了再执行的函数 （类似于setTimeout）
          this.slots[0].defaultIndex = 0
        })
      },
      created(){
        this.getcityList()
      },
      methods:{
        //获取城市列表， 省份
        getcityList(){
          var self = this
          self.$util.get('address/getThreeCityList',{
            uid: 1
          }).then(data => {
            if(data.data.length>0){
              self.citylist = data.data
              data.data.forEach(item_pro => {
                let obj = {};
                obj.name = item_pro.name;
                obj.id = item_pro.id;
                self.slots[0].values.push(obj)
              })
            }
          })
        },
        //获取市
        getcityFn(province) {
          var self = this
          let cityArr = [];
          self.citylist.forEach(function (item) {
            if (item.name == province && item.child) {
              item.child.forEach(function (args) {
                let obj = {};
                obj.name = args.name;
                obj.id = args.id;
                cityArr.push(obj);
              });
            }
          });
          return cityArr
        },
        //获取区县
        getcountryFn(province,city){
          var self = this
          let countyArr = [];
          self.citylist.forEach(function (item) {
            if (item.name === province) {
              item.child.forEach(function (args) {
                if (args.name === city) {
                  args.child.forEach(function (param) {
                    let obj = {};
                    obj.name = param.name;
                    obj.id = param.id;
                    countyArr.push(obj);
                  })
                }
              });
            }
          });
          return countyArr
        },

        //滑动改变值
        onValuesChange(picker, values) {
          var self = this
          if(values[0].name != undefined){
            console.log(values)

            //给市、县赋值
            picker.setSlotValues(1, this.getcityFn(values[0]["name"]));
            picker.setSlotValues(2, this.getcountryFn(values[0]["name"], values[1]["name"]))

            self.myAddressProvince = values[0]["name"]
            self.myAddressCity = values[1]["name"]
            self.myAddresscounty = values[2]["name"]
            self.province_id = values[0]["id"]
            self.city_id = values[1]["id"]
            self.county_id = values[2]["id"]

          }

        },
        // 关闭组件
        cancalFn(type){
          this.regionVisible = !this.regionVisible
          var addinfo ={
            province: this.myAddressProvince,
            city: this.myAddressCity,
            country: this.myAddresscounty,
            province_id: this.province_id,
            city_id: this.city_id,
            country_id: this.county_id
          }
          if(type == 2){
            console.log(addinfo)
            this.$store.commit('setaddressinfo', addinfo)
          }

          this.myAddressProvince = ''
          this.myAddressCity = ''
          this.myAddresscounty = ''
          this.slots = []
        }
      }
    }
</script>

<style lang="less" scoped>

  @import "../../assets/css/common/cityLinkpage";
</style>
